<template>
  <div class="discussContainer">
    <!--左侧导航区-->
    <div class="leftBox">
      <ul>
        <li style="margin-bottom: 10px;"><label><i class="iconfont icon-taolunqu"></i>讨论区</label></li>
        <li @click="leftMenuClick(index)" class="menuItem" v-for="(item,index) in leftMenuList" :key="item" :class="{leftMenuChoose: index === chooseIndex}">{{item}}</li>
      </ul>
    </div>
    <!-- 右侧展示区-->
    <div class="rightBox">
      <div class="contentBox">
        <!--中左侧-->
        <div class="leftContent">
          <div class="title">
            <div><i style="color:#5a9cf8;font-size:10px;margin-right:10px;" class="iconfont icon-checkbox-full"></i>分享和求助</div>
            <el-button @click="toEdit"><i class="iconfont icon-bianji1"></i>我要发布</el-button>
          </div>
          <div class="contentNavBar">
            <ul class="navbarList">
              <li class="navbarItem" v-for="(item,index) in liList" :key="item"
              :class="{itemChoose: index === chooseItemIndex}" @click="changeTab(index)">
              {{item}}
              </li>
            </ul>
          </div>
          <Moment v-for="item in momentList" :key="item.id" :avatarUrl="item.author.avatarUrl" :authorName="item.author.name"
          :articleTitle="item.title" :replyNumber="item.reply" :praiseNumber="item.praise" :authorId ="item.author.id"
          :passNumber="item.pass" :createTime="item.createTime" :sex="item.author.sex" @click.native="momentClick(item.id)"
          :level="levelMethod(item.author.experience).level"></Moment>
          <!--分页区域-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="offset"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Moment from '../components/Moment.vue'
import formatTime from '../utils/formatTime'
import level from '../utils/level.js'
export default {
  data () {
    return {
      leftMenuList: ['交流讨论', '面经分享', '许愿模块', '文章分享'],
      chooseIndex: 0,
      liList: ['最新发表', '最多回复', '最多点赞', '历史最多浏览'],
      chooseItemIndex: 0,
      url: 'https://images.nowcoder.com/images/20210812/179162942_1628733662786/B873B18FE10C0D88FF34BBCBDFDBEE26?x-oss-process=image/resize,m_mfit,h_100,w_100',
      offset: 1,
      size: 10,
      momentList: [],
      total: 0,
      levelMethod: ''
    }
  },
  methods: {
    leftMenuClick (index) {
      this.chooseIndex = index
      this.getMomentList()
    },
    changeTab (index) {
      this.chooseItemIndex = index
      this.getMomentListByIndex(index)
    },
    getMomentListByIndex (index) {
      if (index === 1) {
        this.getMomentListByReply()
      }
      if (index === 2) {
        this.getMomentListByPraise()
      }
      if (index === 0) {
        this.getMomentList()
      }
      if (index === 3) {
        this.getMomentListByPass()
      }
    },
    async getMomentList () {
      const res = await this.$http.get(`/moment/${this.chooseIndex + 1}?offset=${this.offset}&size=${this.size}`)
      this.momentList = res.data.list
      this.momentList.forEach(item => {
        item.createTime = formatTime(item.createTime, 'YYYY-MM-DD')
      })
      this.total = res.data.total
    },
    toEdit () {
      this.$router.push('/edit')
    },
    async getMomentListByReply () {
      const res = await this.$http.get(`/moment/replyDesc/${this.chooseIndex + 1}?offset=${this.offset}&size=${this.size}`)
      this.momentList = res.data
      this.momentList.forEach(item => {
        item.createTime = formatTime(item.createTime, 'YYYY-MM-DD')
      })
      console.log(this.momentList)
      this.total = this.momentList[0].total
    },
    async getMomentListByPraise () {
      const res = await this.$http.get(`/moment/praiseDesc/${this.chooseIndex + 1}?offset=${this.offset}&size=${this.size}`)
      this.momentList = res.data
      this.momentList.forEach(item => {
        item.createTime = formatTime(item.createTime, 'YYYY-MM-DD')
      })
      this.total = this.momentList[0].total
    },
    async getMomentListByPass () {
      const res = await this.$http.get(`/moment/passDesc/${this.chooseIndex + 1}?offset=${this.offset}&size=${this.size}`)
      this.momentList = res.data
      this.momentList.forEach(item => {
        item.createTime = formatTime(item.createTime, 'YYYY-MM-DD')
      })
      this.total = this.momentList[0].total
    },
    handleSizeChange (size) {
      this.size = size
      this.getMomentListByIndex(this.chooseItemIndex)
    },
    handleCurrentChange (page) {
      this.offset = page
      this.getMomentListByIndex(this.chooseItemIndex)
    },
    momentClick (momentId) {
      this.$router.push(`detail/${momentId}`)
    }

  },
  created () {
    this.levelMethod = level
    this.$store.commit('setChoose', 'discuss')
    this.getMomentList()
  },
  components: {
    Moment
  }
}
</script>

<style scoped>
  .discussContainer{
    background-color: #f7f8f9;
    display: flex;
    padding: 10px 150px;
    box-sizing: border-box;
  }
  .leftBox{
    background-color: #ffffff;
    width:200px;
    min-width: 200px;
    padding: 10px;
    margin-right: 20px;
  }
  .leftBox ul li label{
    height: 31px;
    font-size: 16px;
    font-weight: 700;
  }
  label i {
    font-size: 16px;
  }
  .rightBox{
  background-color: #f7f8f9;
  flex:1;
  }
  .menuItem{
    height: 31px;
    line-height: 31px;
  }
  .menuItem:hover,.leftMenuChoose{
    background-color: #e9f8f5;
    cursor: pointer;
  }
  .advertisement{
    height: 100px;
    margin-bottom: 20px;
  }
  .contentBox{
    display: flex;
  }
  .leftContent{
    width: 700px;
    background-color: #f7f8f9;
    margin-right: 20px;
    padding: 10px;
  }
  .leftContent .title{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .leftContent .title .el-button{
    margin-left: auto;
    margin-right: 20px;
    text-align: center;
    vertical-align: middle;
  }
  .contentNavBar{
    background-color: #fff;
    height: 45px;
    border-radius: 10px;
    /* box-shadow:#888888 0px 0px 10px ; */
  }
  .navbarList{
    display: flex;
    height: 100%;
    align-items: center;
    text-align: center;
  }
  .navbarItem{
    width: 100px;
    cursor: pointer;
  }
  .itemChoose{
    color: #5a9cf8;
    font-weight: 700;
  }
  .itemChoose::after{
    content: "";
    display: block;
    margin: auto;
    width: 16px;
    height: 2px;
    line-height: 14px;
    background-color: #5a9cf8;
    border-radius: 1px;
  }
  .rightContent{
    background-color: #fff;
    flex: 1;
    height: 200px;
  }
</style>
